<template>
  <div style="height:100%;overflow:hidden;">
    <el-card class="box-card">

      <span class="card_title" v-if="musicTitle=='推荐音乐'">{{musicTitle}}</span>
      <span class="card_title" v-else>"{{musicTitle}}" 搜索结果</span>

      <el-table class="table" :data="tableData"
        style="width: 100%;font-size:15px"
        :row-style="{height:'120px',cursor: 'pointer'}"
        :header-row-style="{height:'100px', 'font-size':'20px'}"
        highlight-current-row @current-change="handleCurrentChange">
        <el-table-column label="歌曲信息" prop="date" width="500px">
          <template slot-scope="scope">
            <div class="playDiv">
              <i class="el-icon-video-play MusicBtn "
                @click.stop="playMusic(scope.row)"></i>

              <el-image lazy :src="`${scope.row.pic}`" fit='cover' class="pic"
                @click.stop="playMusic(scope.row)">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <span class="MusicDate">
              {{scope.row.date}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="作曲" prop="tag" width="500px">
        </el-table-column>
        <el-table-column label="时长" prop="time">
        </el-table-column>

        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="danger"
              @click.stop="MusicDownload(scope.$index, scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="done" class="card_title">没数据啦</div>
      <div v-if="!done&&musicFlag" style="height:50px;margin-bottom:-150px">
      </div>
    </el-card>

  </div>
</template>

<script>
import { PlayMusic } from '../api/Play.js'
import download from "../../node_modules/downloadjs/download.js"
import { listChange } from '../utils/tools'
import { searchMusic } from '../api/Layout'
export default {
  name: '',
  data () {
    return {
      tableData: [],
      // current_id: '',
      // 播放音乐id
      offset: 1,
      // 搜索更多的偏移量
      loadFlag: true,
      // 加载更新
      done: false,
      drawer: true
    };
  },
  async created () {
    this.tableData.push(...this.newMusicList)
    if (this.tableData.length < 10) this.done = true
  },
  updated () {
    console.log('更新?');
  },
  mounted () {
    // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    if (this.musicFlag) window.addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy () {
    // 销毁监听事件
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    MusicDownload (index, row) {
      // 下载按钮
      PlayMusic({ id: row.id }).then((res) => {
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法下载')
        download(res.data.data[0].url)
        // 下载音乐
      }).catch((err) => {
        this.ErrorAlert('下载失败')
      })
    },
    playMusic (row) {
      // 播放
      this.handleCurrentChange(row)
    },
    handleCurrentChange (val) {
      // 选中行触发事件
      PlayMusic({ id: val.id }).then((res) => {
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法播放')
        this.$router.push({ name: 'play', query: { val: JSON.stringify(val), url: JSON.stringify(res.data.data[0].url) } })
        // 由于传参无法传复杂数据类型,所以先转化为字符串
      }).catch((err) => {
        console.log(err);
      })
    },
    ErrorAlert (mes) {
      // 错误提示
      this.$message({
        message: mes,
        duration: 700,
        type: 'error'
      });
    },
    handleScroll () {
      // 加载更多数据
      if (!this.loadFlag || this.done) return
      var timer = null
      let card = this.$parent.$refs.compt
      if (card.getBoundingClientRect().bottom - 100 < document.documentElement.clientHeight) {
        // 当页面主元素底部到浏览器顶部高度位置小于浏览器总高度
        this.loadFlag = false
        clearTimeout(timer)
        timer = setTimeout(() => {
          searchMusic({ keywords: this.musicTitle, offset: (this.offset) * 30 })
            .then((res) => {
              if (res.data.result.songCount == 0) { return this.done = true }
              this.offset++
              this.tableData.push(...listChange(res.data.result.songs))
              this.loadFlag = true
            })
            .catch((err) => {
              console.log(err);
            })
        }, 1000)
      }
    },

  },
  components: {},

  props: {
    newMusicList: { type: Array },
    musicTitle: { type: String, default: '' },
    musicFlag: { type: Boolean, default: false },
  },

  watch: {},

  computed: {},

}

</script>
<style scoped>
.box-card {
  height: 100%;
  width: 90%;
  margin: auto;
  border-radius: 20px;
  /* margin-bottom: -155px; */
}

.pic {
  width: 80px;
  height: 80px;
  box-shadow: 8px 2px 12px 0 rgb(0 0 0 / 20%);
}
.card_title {
  font-size: 20px;
}
.playDiv {
  display: inline-block;
  position: relative;
  height: 80px;
  width: 80px;
}
.MusicBtn {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 40px;
  z-index: 2;
  position: absolute;
  top: 18px;
  left: 20px;
}
.MusicDate {
  display: inline-block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 80px;
  font-size: 19px;
  margin-left: 20px;
}
.has-gutter tr {
  height: 200px;
  font-size: 20px;
}
.btPlayer {
  /* width: 100%; */
  /* display: ; */
  height: 100px;
}
</style>